<template>
  <div>
    <!-- 顶部 -->
    <div class="top">
      <div class="top-tab">
        <div @click="onOut"><van-icon name="arrow-left" /></div>
        <!-- <div><van-icon name="search" /></div> -->
      </div>

      <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in list" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 秒杀特卖 -->
    <div class="price">
      <div>
        <div>秒杀特卖</div>
        <div><span>￥</span>{{ detail.price }}<span>/件</span></div>
      </div>
      <!-- 倒计时vant组件 -->
      <div>
        <div>距秒杀结束还剩</div>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">0{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
    </div>

    <!-- 商品名称 -->
    <div class="name">
      <div>
        <div>{{ detail.name }}</div>
        <div>
          <span> &nbsp;生产日期 | 2022-06-28 &nbsp;</span>
          <span> &nbsp; 保质期 | 12个月 &nbsp;</span>
        </div>
      </div>
      <div @click="onShare">
        <van-icon name="share-o" />
        <div>分享</div>
      </div>

      <!-- 分享面板vant组件 -->
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
    <div class="greyLine"></div>

    <!-- 平台保障 -->
    <div class="plat">
      <!-- 平台保障行 -->
      <van-row type="flex" justify="space-between" @click="onShow">
        <van-col span="4" style="font-size: 12px; font-weight: bold"
          >平台保障</van-col
        >
        <van-col span="18" class="hidden"
          >不支持7天无理由 • 价格保护 • 72小时品质无忧 • 闪电退‥</van-col
        >
        <van-col span="1"><van-icon name="arrow" /></van-col>
      </van-row>

      <!-- 优惠券行 -->
      <van-row type="flex" justify="space-between" @click="onShowyouhui">
        <van-col span="4" style="font-size: 12px; font-weight: bold"
          >优惠</van-col
        >
        <van-col span="18" style="font-size: 10px">超额优惠券未领取</van-col>
        <van-col span="1"><van-icon name="arrow" /></van-col>
      </van-row>

      <van-row type="flex" justify="space-between">
        <van-col span="4" style="font-size: 12px; font-weight: bold"
          >自提信息</van-col
        >
        <van-col span="18" style="font-size: 10px"
          >美团优选-优壹朵手感烘焙，明天16:00提货</van-col
        >
        <van-col span="1"></van-col>
      </van-row>

      <!-- 遮盖层vant组件->平台保障 -->
      <van-action-sheet v-model="show" title="平台保障">
        <div class="content">
          <van-cell
            center
            title="不支持7天无理由"
            label="此商品为生鲜[冷藏/冷冻类食品，不支持7天无理由退货，收货后请注意妥善保存"
          >
            <template #icon>
              <van-icon name="send-gift-o" />
            </template>
          </van-cell>

          <van-cell
            center
            title="价格保护"
            label="如商品购买当日23点前降价(不含活动降价),送达后48小时内可在“订单详情-申请售后”申请退差价红包"
          >
            <template #icon>
              <van-icon name="gem-o" />
            </template>
          </van-cell>

          <van-cell
            center
            title="72小时品质无忧"
            label="商品送达后72小时内,发现腐烂/变质等情况，提供有效凭证后，平台24小时内响应审核退款"
          >
            <template #icon>
              <van-icon name="shop-o" />
            </template>
          </van-cell>

          <van-cell
            center
            title="闪电退货"
            label="诚信用户申请退款,经团长/平台审核退款通过后，享受闪电退款到账服务"
          >
            <template #icon>
              <van-icon name="good-job-o" />
            </template>
          </van-cell>

          <van-cell
            center
            title="缺货退"
            label="购买后如发生商家缺货,平台及时给您办理退款"
          >
            <template #icon>
              <van-icon name="medal-o" />
            </template>
          </van-cell>
        </div>
      </van-action-sheet>

      <!-- 遮盖层vant组件->优惠券 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>

    <div class="greyLine"></div>

    <!-- 用户评价 -->
    <div class="speak">
      <div @click="getSpeak">
        <div>用户评价<span>(3)</span></div>
        <div><van-icon name="arrow" /></div>
      </div>
      <div>
        <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
        <span>用户名</span>
        <div>购买方便，价格实惠，鲜而不腥，包装无损坏，品质非常好,推荐下单</div>
      </div>
    </div>

    <div class="greyLine"></div>

    <!-- 商品详情 -->
    <div class="pro-detail">
      <div>商品详情</div>
      <van-row type="flex">
        <van-col span="10">
          <img
            src="https://img1.baidu.com/it/u=3644732628,1228648856&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=400"
            alt=""
          />
        </van-col>
        <van-col span="10">
          <img
            src="https://img2.baidu.com/it/u=726100700,3178019413&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500"
            alt=""
          />
        </van-col>
        <van-col span="10">
          <img
            src="http://t14.baidu.com/it/u=2852844891,2309589544&fm=224&app=112&f=JPEG?w=500&h=500"
            alt=""
          />
        </van-col>
        <van-col span="10">
          <img
            src="https://img2.baidu.com/it/u=892745497,1002301763&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=437"
            alt=""
          />
        </van-col>
      </van-row>
    </div>

    <!-- 底部加入购物车vant组件 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onCart" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onAddProduct"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onConfirm"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { requestProductDetail } from "@/api/homelx/product";
import { Toast } from "vant";
import { Dialog } from "vant";

//优惠券组件
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};

export default {
  data() {
    return {
      show: false,
      list: [], //banner图
      detail: {}, //商品详情
      //倒计时vant组件数据
      time: 30 * 60 * 60 * 1000,
      timeData: {
        hours: 6,
        minutes: 56,
        seconds: 68,
      },
      //优惠券vant组件
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      //分享面板vant组件
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  methods: {
    /*
      * 加入购物车
          1. 判断是否登录
          2. 判断是否已经存在要添加的商品，若存在，只是数量加一
    */
    onAddProduct() {
      //1. 判断是否登录
      if (this.$store.getters.getUser.username) {
        let cartList = this.$store.getters.cartList; //获取store中已加入到购物车的商品列表
        //2. 判断是否已经存在要添加的商品，若存在，只是数量加一
        let product = cartList.find((item) => item.id == this.detail.id);
        if (product) {
          console.log(product.num);
          product.num++;
          Toast.success("添加成功");
        } else {
          this.$store.dispatch("addCart", this.detail);
          Toast.success("添加成功");
        }
      } else {
        Dialog.confirm({
          title: "请先登录",
          // message: "是否现在登录",
        })
          .then(() => {
            // on confirm
            this.$router.push({path:'/login'})
          })
          .catch(() => {});
      }
    },

    /**
     * 立即购买，跳转到确认订单页面
     *    1.若store中存在这个商品，状态为false,则把该商品state状态改为true
     *    2.若store中存在这个商品，状态为true,则不做任何操作，直接跳转到订单页面
     *    3.若store中不存在这个商品，则添加进去并且状态改为true
     */
    onConfirm() {
      if (this.$store.getters.getUser.username) {
        let cartList = this.$store.getters.cartList;
        let product = cartList.find((item) => item.id == this.detail.id);
        if (product) {
          if (!product.state) {
            product.state = true;
          }
        } else {
          this.detail.state = true;
          console.log("this.detail.state", this.detail.state);
          this.$store.dispatch("addCart", this.detail);
        }
        this.$router.push({ path: "/order" });
      }else{
        Dialog.confirm({
          title: "请先登录",
          // message: "是否现在登录",
        })
          .then(() => {
            // on confirm
            this.$router.push({path:'/login'})

          })
          .catch(() => {});
      }
    },
    /**
     * 点击购物车->判断是否已登录->若登录再跳转到购物车界面
     */
    onCart() {
      if (this.$store.getters.getUser.username) {
        this.$router.push({ path: "/cart" });
      } else {
        Dialog.confirm({
          title: "请先登录",
          // message: "是否现在登录",
        })
          .then(() => {
            // on confirm
            this.$router.push({path:'/login'})

          })
          .catch(() => {});
      }
    },

    //跳转到评论页面
    getSpeak() {
      this.$router.push({ path: `/speak?id=${this.detail.id}` });
    },

    //返回首页
    onOut() {
      this.$router.go(-1);
    },
    //点击分享，出现分享面板
    onShare() {
      this.showShare = true;
    },

    //平台保障vant组件出现
    onShow() {
      this.show = true;
    },

    //优惠券vant组件出现
    onShowyouhui() {
      this.showList = true;
    },
    //优惠券组件
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
  },
  async created() {
    let id = this.$route.query.id;
    //获取商品详情
    let res = await requestProductDetail(id);
    let { resultCode, resultInfo } = res.data;
    if (resultCode == 1) {
      this.list = resultInfo.list;
      this.detail = {
        id: resultInfo.id,
        name: resultInfo.shop,
        price: resultInfo.price,
        desc: "",
        num: 1,
        oldPrice: resultInfo.oldprice,
        url: resultInfo.picture,
        state: false,
      };
    }
  },
};
</script>

<style lang="scss" scoped>
// // 顶部
.top {
  position: relative;
  .top-tab {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 6px;
    margin-top: 5px;

    div {
      width: 30px;
      height: 30px;
      background-color: rgb(237, 241, 176);
      border-radius: 50%;
      text-align: center;
    }
    div:nth-child(1) {
      .van-icon {
        font-size: 20px;
        margin-top: 5px;
        margin-left: -3px;
      }
    }
    div:nth-child(2) {
      margin-right: 15px;
      .van-icon {
        font-size: 22px;
        margin-top: 5px;
        margin-left: 3px;
      }
    }
  }
  .van-swipe img {
    width: 100%;
    height: 250px;
  }
}

//秒杀特卖
.price {
  width: 100%;
  height: 50px;
  display: flex;

  > div:nth-child(1) {
    width: 70%;
    background-color: rgb(231, 61, 9);
    display: flex;
    align-items: center;
    color: white;
    padding-left: 10px;
    > div:nth-child(1) {
      width: 33px;
      height: 33px;
      font-size: 11px;
      text-align: center;
      background-color: red;
      margin-right: 6px;
    }
    > div:nth-child(2) {
      font-size: 20px;
      font-weight: bold;
      span:nth-child(1) {
        font-size: 13px;
      }
      span:nth-child(2) {
        font-size: 9px;
        color: rgb(209, 206, 206);
        font-weight: 300;
        margin-left: 4px;
      }
    }
  }
  > div:nth-child(2) {
    width: 30%;
    background-color: rgb(237, 241, 176);
    div:nth-child(1) {
      color: red;
      font-size: 10px;
      font-weight: 700;
      margin-left: 8px;
      margin-top: 5px;
    }
  }
}

//倒计时vant组件
.colon {
  display: inline-block;
  margin: 0 0px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.van-count-down {
  margin-top: 4px;
  margin-left: 12px;
}

//商品名称
.name {
  height: 90px;
  display: flex;

  > div:nth-child(1) {
    width: 88%;
    > div:nth-child(1) {
      width: 315px;
      margin-left: 10px;
      margin-top: 5px;
      font-weight: 700;
      font-size: 15px;
    }
    > div:nth-child(2) {
      margin-left: 10px;
      // margin-top: 2px;
      // margin-bottom: 10px;
      span {
        border: 1px solid rgb(138, 136, 136);
        border-radius: 3px;
        font-size: 9px;
        color: rgb(68, 68, 68);
        margin-right: 10px;
        display: inline-block;
        height: 16px;
      }
    }
  }
  > div:nth-child(2) {
    width: 10%;
    height: 40px;
    margin-top: 18px;
    border-left: 1px solid rgb(212, 210, 210);
    text-align: center;
    .van-icon {
      color: red;
      font-size: 22px;
    }
    div {
      font-size: 13px;
      color: rgb(105, 104, 104);
    }
  }
}

.greyLine {
  border: 2px solid rgb(231, 230, 230);
  width: 100%;
}

//平台保障
.plat {
  height: 100px;

  .van-row {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 8px;
    .van-icon {
      color: grey;
      font-size: 18px;
    }
    .hidden {
      color: rgb(216, 219, 7);
      font-size: 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .content {
    padding: 16px 16px 160px;
  }

  .van-action-sheet .van-icon {
    font-size: 30px;
    margin-right: 10px;
  }
}

//评论
.speak {
  // height: 500px;
  margin-bottom: 10px;

  > div:nth-child(1) {
    width: 100%;
    // height: 14px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    display: flex;
    font-size: 9px;
    font-weight: 700;
    > div:nth-child(1) {
      width: 91%;
      span {
        font-size: 7px;
        color: rgb(158, 157, 157);
      }
    }
    .van-icon {
      color: grey;
      font-size: 18px;
    }
  }
  > div:nth-child(2) {
    margin-top: 5px;
    img {
      width: 30px;
      height: 30px;
      vertical-align: middle;
      border-radius: 50%;
      margin-left: 10px;
      margin-right: 10px;
    }
    span {
      font-size: 13px;
      font-weight: 700;
    }
    div {
      font-size: 12px;
      margin-left: 50px;
      margin-right: 15px;
    }
  }

  //规格信息
  .format {
    padding-left: 10px;
    height: 300px;
    > div:nth-child(1) {
      font-size: 15px;
      font-weight: bold;
    }
  }
}

//商品详情
.pro-detail {
  > div:nth-child(1) {
    width: 100%;
    text-align: center;
    font-size: 17px;
    margin-top: 15px;
  }
  .van-row .van-col {
    height: 180px;
    margin-top: 15px;
    margin-left: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>